<template>
  <div>
    <!-- 查询功能 -->
    <div class="card" style="margin-bottom: 5px">
      <el-button type="success" @click="toDevice">设备查询</el-button>
      <el-button type="success" @click="toMaterial">物料查询</el-button>
      <el-button type="success" @click="toTool">工具查询</el-button>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="设备名称">
          <el-input
            v-model="formInline.deviceName"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="load" style="margin: 0 10px"
            >查询</el-button
          >
          <el-button type="info" style="margin: 0 10px" @click="reset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 新增功能 -->
    <div style="margin-bottom: 10px">
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>
    <!-- 设备新增功能弹窗 -->
    <div>
      <el-dialog
        title="新增设备"
        :visible.sync="deviceAddVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          ref="deviceAddForm"
          :model="deviceAddForm"
          :rules="deviceAddRules"
          label-width="140px"
        >
          <el-form-item label="创建人" prop="creator">
            <el-input v-model="deviceAddForm.creator"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="deviceAddForm.deviceName"></el-input>
          </el-form-item>
          <el-form-item label="库存报警阈值" prop="storageThreshold">
            <el-input v-model="deviceAddForm.storageThreshold"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deviceAddVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
        <el-table-column prop="storageNum" label="库存数量"></el-table-column>
        <el-table-column prop="creator" label="创建人"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页功能 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="current"
        :page-size="size"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 设备编辑功能弹窗 -->
    <div>
      <el-dialog
        title="编辑设备"
        :visible.sync="deviceEditVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          ref="deviceEditForm"
          :model="deviceEditForm"
          :rules="deviceEditRules"
          label-width="140px"
        >
          <el-form-item label="操作人" prop="operator">
            <el-input v-model="deviceEditForm.operator"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="deviceEditForm.deviceName"></el-input>
          </el-form-item>
          <el-form-item label="库存报警阈值" prop="storageThreshold">
            <el-input v-model="deviceEditForm.storageThreshold"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deviceEditVisible = false">取 消</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getDeviceData, addDeviceData, editdeviceData } from "@/api/newDevice";

export default {
  data() {
    return {
      tableData: [],
      // 查询数据
      formInline: {
        deviceName: "",
      },
      // 分页数据
      current: 1,
      size: 10,
      total: 100,

      // 设备新增数据
      deviceAddForm: {
        creator: "",
        deviceName: "",
        storageThreshold: "",
      },
      deviceAddRules: {
        creator: [{ required: true, message: "请输入创建人", trigger: "blur" }],
        deviceName: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        storageThreshold: [
          { required: true, message: "请输入库存报警阈值", trigger: "blur" },
        ],
      },
      deviceAddVisible: false,
      // 设备编辑数据
      deviceEditForm: {
        operator: "",
        deviceName: "",
        storageThreshold: "",
        deviceCategoryId: "",
      },
      deviceEditRules: {
        operator: [
          { required: true, message: "请输入操作人", trigger: "blur" },
        ],
        deviceName: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        storageThreshold: [
          { required: true, message: "请输入库存报警阈值", trigger: "blur" },
        ],
      },
      deviceEditVisible: false,
    };
  },
  created() {
    this.getDevice();
  },
  methods: {
    async getDevice() {
      const res = await getDeviceData({
        pageNum: this.current,
        pageSize: this.size,
      });

      if (res.data.code === 200) {
        this.total = res.data.data.page.total;
        console.log(res);
        this.tableData = res.data.data.page.records;
      } else {
        // 显示失败原因
        this.$message.error(res.data.message || "获取列表失败");
      }
    },
    // 查询功能
    load() {},
    reset() {
      this.formInline = {
        deviceName: "",
      };
      this.getDevice();
    },
    // 分页功能
    handleCurrentChange(val) {
      this.current = val;
      this.getDevice();
    },
    handleSizeChange(val) {
      this.size = val;
      this.current = 1;
      this.getDevice();
    },
    // 新增功能
    async handleAdd() {
      this.deviceAddVisible = true;
      this.deviceAddForm = {
        creator: "",
        deviceCategoryId: "",
        deviceName: "",
        storageThreshold: "",
      };
    },
    // 新增保存
    async save() {
      this.$refs.deviceAddForm.validate(async (valid) => {
        if (!valid) {
          // 如果验证不通过，则显示错误提示并返回
          this.$message.error("请检查输入项是否符合要求");
          return;
        }
        const res = await addDeviceData(this.deviceAddForm);
        if (res.data.code !== 200) {
          console.log(res.data.message);

          this.$message.error("新增失败");
          return;
        } else {
          this.$message.success("新增成功");
          this.deviceAddVisible = false;
          await this.getDevice();
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    // 编辑功能
    handleEdit(row) {
      this.deviceEditVisible = true;
      this.deviceEditForm = {
        deviceCategoryId: row.deviceCategoryId,
        operator: "",
        deviceName: row.deviceName,
        storageThreshold: row.storageThreshold,
      };
    },
    async update() {
      this.$refs.deviceEditForm.validate(async (valid) => {
        if (!valid) {
          // 如果验证不通过，则显示错误提示并返回
          this.$message.error("请检查输入项是否符合要求");
          return;
        }
        const res = await editdeviceData(this.deviceEditForm);
        if (res.data.code !== 200) {
          this.$message.error("编辑失败");
          console.log(res.data.message);

          return;
        } else {
          this.$message.success("编辑成功");
          this.deviceEditVisible = false;
          await this.getDevice();
        }
      });
    },
    toDevice() {
      const currentPath = this.$route.path;
      // 目标路由路径
      const targetPath = "/device";

      // 如果当前不在目标路由，才执行跳转
      if (currentPath !== targetPath) {
        this.$router.push(targetPath);
      }
    },
    toMaterial() {
      this.$router.push("/material");
    },
    toTool() {
      this.$router.push("/tool");
    },
  },
};
</script>
